$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;
  padding-top: 8vw;

  .types {
    margin: 4vw 15vw 2vw 15vw;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 160/$f+vw;
    z-index: 9;
    transform: scale(.95);
    .item {
      width: 24%;
      border-radius: 50/$f+vw;
      background: #EFEEF6;
      color: #6456A3;
      font-size: $fontSize_22;
      font-family: 'Montserrat-Regular.otf';
      padding: 0.8vw 0;
      text-align: center;
      cursor: pointer;
      transition: all 600ms;
      display: flex;
      align-items: center;
      &:hover {
        background: #EFF9F8;
        color: #61C0BD;
      }
    }

    .active {
      background: #EFF9F8;
      color: #61C0BD;
    }
  }

  .section1 {
    margin: 0 15vw;
    transform: scale(.95);
    .pic {
      img {
        width: 100%;
        display: block;
        object-fit: contain;
        border-radius: 100/$f+vw;
      }
    }
  }

  .section2 {
    margin: 4vw 15vw 0 15vw;
    transform: scale(.95);
    .t {
      color: #6456A3;
      font-size: $fontSize_48;
      font-family: 'Montserrat-Regular.otf';
      text-align: center;
    }

    .list {
      margin-top: 2vw;

      .item {
        position: relative;
        padding: 4vw 0;
        display: flex;
        justify-content: space-between;

        .pic {
          width: 35%;

          img {
            width: 100%;
            display: block;
            object-fit: contain;
            transition: all 600ms;
          }
          &:hover{
            img{
              transform: scale(1.05);
            }
          }
        }

        .info {
          width: 58%;

          .st {
            color: #6456A3;
            font-size: $fontSize_50;
            font-style: italic;
            font-family: 'Newsreader';
          }

          .des {
            color: #999BB0;
            font-size: $fontSize_28;
            font-style: italic;
            font-family: 'Montserrat-Light';
            line-height: 1.7;
            margin-top: 2vw;
            p{
              font-family: 'Montserrat-Light';
            }
          }

          .dList {
            margin-top: 2vw;

            .dItem {
              margin-bottom: 1.5vw;
              cursor: pointer;
              .d1 {
                display: flex;
                justify-content: space-between;
                .icon {
                  margin-top: 0.2vw;
                  svg {
                    display: block;
                    width: 1vw;
                    transition: all 600ms;
                  }
                }

                .dt {
                  color: #6456A3;
                  font-size: $fontSize_24;
                  font-family: 'Montserrat-Regular.otf';
                  width: calc(100% - 1.5vw);
                }
              }

              .d2 {
                color: #999BB0;
                font-size: $fontSize_28;
                font-style: italic;
                font-family: 'Montserrat-Light';
                line-height: 1.7;
                margin-left: 1.5vw;
                display: none;
                margin-top: 1vw;
                p{
                  font-family: 'Montserrat-Light';
                }
              }
            }
            .active{
              .d1{
                .icon{
                  svg{
                    transform: rotate(90deg);
                  }
                }
              }
            }
          }
        }

        &::after {
          content: '';
          display: block;
          background: url(../images/line.png) no-repeat;
          background-size: 100% 100%;
          height: 1px;
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }

      .item:nth-child(2n) {
        flex-direction: row-reverse;
      }
      .item:last-child{
        &::after{
          display: none;
        }
      }
    }
  }

  .section3{
    background: #EEECF4;
    padding: 4vw 15vw;
    .box{
      margin-bottom: 3vw;
      transform: scale(.95);
      .pic{
        img{
          width: 100%;
          display: block;
          object-fit: contain;
        }
      }
      .t {
        color: #6456A3;
        font-size: $fontSize_48;
        font-family: 'Montserrat-Regular.otf';
        text-align: center;
        margin: 4vw 0 6vw 0;
      }
      .content{
        display: flex;
        justify-content: space-between;
        .pic {
          width: 35%;

          img {
            width: 100%;
            display: block;
            object-fit: contain;
            transition: all 600ms;
          }
          &:hover{
            img{
              transform: scale(1.05);
            }
          }
        }

        .info {
          width: 58%;

          .st {
            color: #6456A3;
            font-size: $fontSize_50;
            font-style: italic;
            font-family: 'Newsreader';
          }

          .des {
            color: #999BB0;
            font-size: $fontSize_28;
            font-style: italic;
            font-family: 'Montserrat-Light';
            line-height: 1.7;
            margin-top: 4vw;
            p{
              font-family: 'Montserrat-Light';
            }
          }
        }
      }
    }
  }



  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .types{
      margin: 20px 5%;
      flex-direction: column;
      position: static;
      transform: scale(1);
      .item{
        padding: 15px 0;
        width: 100%;
        font-size: 18px;
        margin-bottom: 10px;
      }
    }
    .section1{
      margin: 0 5%;
      transform: scale(1);
    }
    .section2{
      margin: 60px 5% 30px 5%;
      transform: scale(1);
      .t{
        font-size: 24px;
      }
      .list{
        margin-top: 30px;
        .item{
          flex-direction: column !important;
          padding: 30px 0;
          .pic{
            width: 100%;
          }
          .info{
            width: 100%;
            margin-top: 30px;
            .st{
              font-size: 24px;
              line-height: 1.2;
            }
            .des{
              font-size: 18px;
              margin-top: 15px;
            }
            .dList{
              margin-top: 15px;
              .dItem{
                margin-bottom: 20px;
                .d1{
                  .icon{
                    margin-top: 5px;
                    svg{
                      width: auto;
                    }
                  }
                  .dt{
                    font-size: 18px;
                    width: calc(100% - 40px);
                  }
                }
                .d2{
                  margin-left: 40px;
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
    .section3{
      padding: 30px 5%;
      .box{
        margin-bottom: 60px;
        transform: scale(1);
        .t{
          font-size: 24px;
          margin: 30px 0 40px 0;
        }
        .content{
          flex-direction: column-reverse;
          .pic{
            width: 100%;
          }
          .info{
            width: 100%;
            margin-top: 30px;
            .st{
              font-size: 24px;
              line-height: 1.2;
            }
            .des{
              font-size: 18px;
              margin-top: 15px;
            }
          }
        }
      }
    }
  }
}